﻿@model SMECustomerWebsite.Models.ViewModels.PortfolioManagement.AccountPlanningViewModel

<div class="" role="tabpanel" data-example-id="togglable-tabs">
    @Html.Action("SubMenuPortfolioManagement", "System")
    <!--Modal info dao -->
    <div class="modal fade cm-cp-dao-info" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="col-md-12 profile_details">
                        <div class="well profile_view">
                            <div class="col-sm-12">
                                <h2 id="dao_info_name"></h2>
                                <p>
                                    <strong>Position: </strong> <span id="dao_info_position"></span>
                                </p>
                                <ul class="list-unstyled">
                                    <li><i class="fa fa-building"></i> <strong>Dao: </strong> <span id="dao_info_address"></span> </li>
                                    <li><i class="fa fa-envelope"></i> <strong>Email : </strong><span id="dao_info_email"></span></li>
                                    <li><i class="fa fa-phone"></i> <strong>Branch : </strong><span id="dao_info_office"></span></li>
                                    <li><i class="fa fa-phone"></i> <strong>Region : </strong><span id="dao_info_landline"></span></li>
                                    <li><i class="fa fa-mobile"></i> <strong>Start working date : </strong> <span id="dao_info_phone"></span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>
    <!-- /modals -->
    <div id="myTabContent" class="tab-content">
        <div role="tabpanel" class="tab-pane fade active in" id="tab_content2" aria-labelledby="profile-tab">
            <div class="col-md-12">
                <div class="x_panel tile overflow_hidden">
                    <div id="div-pm-account-planning" class="x_content">
                        @switch (Model.UserRecord.GroupIdentifier)
                        {
                            case "4":
                                <table id="pm-account-planning" class="table custom_table table-bordered table-striped jambo_table">
                                    <thead>
                                        <tr>
                                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.CifHeader</th>
                                            <th class="column-title" width="10%">@SMECustomerWebsite.Core.Resources.Resource.NameHeader</th>
                                            <th class="column-title" width="10%">@SMECustomerWebsite.Core.Resources.Resource.IndustryHeader</th>
                                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.PaymentMethod</th>
                                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.StatusHeader.ToUpper()</th>
                                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.ActionHeader</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                                break;
                            case "3":
                            <table id="pm-account-planning" class="table custom_table table-bordered table-striped jambo_table">
                                <thead>
                                    <tr>
                                        <th class="column-title">MSBO</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.MSBONameHeader</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.CifHeader</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.NameHeader</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.IndustryHeader</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.PaymentMethod</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.StatusHeader.ToUpper()</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.ActionHeader</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                                break;
                            case "2":
                            <table id="pm-account-planning" class="table custom_table table-bordered table-striped jambo_table">
                                <thead>
                                    <tr>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.Branch.ToUpper()</th>
                                        <th class="column-title">MSBO</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.MSBONameHeader</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.CifHeader</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.NameHeader</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.IndustryHeader</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.PaymentMethod</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.StatusHeader.ToUpper()</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.ActionHeader</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                                break;
                            case "1":
                            <table id="pm-account-planning" class="table custom_table table-bordered table-striped jambo_table">
                                <thead>
                                    <tr>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.Zone.ToUpper()</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.Branch.ToUpper()</th>
                                        <th class="column-title">MSBO</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.MSBONameHeader</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.CifHeader</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.NameHeader</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.IndustryHeader</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.PaymentMethod</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.StatusHeader.ToUpper()</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.ActionHeader</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                                break;
                            default:
                                break;
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section scripts
{
    <script src="/scripts/tableeditable/dataTables.rowsGroup.js"></script>
    <script src="~/Scripts/custom_search_table.js"></script>
    <!-- bootstrap-daterangepicker -->
    <script src="~/scripts/datepicker/moment/moment.min.js"></script>
    <script src="~/scripts/datepicker/datepicker/daterangepicker.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var totalColumn = [
                                { "sName": "CIF", "bSortable": false },
                                { "sName": "NAME", "bSortable": false },
                            { "sName": "VPB INDUSTRY", "bSortable": false },
                            { "sName": "PAYMENTMETHOD", "bSortable": false },
                            { "sName": "STATUS", "bSortable": false },
                                { "sName": "INFO", "bSortable": false }]
            var totalLenCol = 5;
            var totalCifCol = -2;
            switch (@Model.UserRecord.GroupIdentifier)
            {
                case 1:
                    totalColumn = [
                            { "sName": "REGION", "bSortable": false },
                            { "sName": "REGION", "bSortable": false },
                            { "sName": "BRANCH", "bSortable": false },
                            { "sName": "DAO", "bSortable": false },
                        { "sName": "MSBO", "bSortable": false },
                            { "sName": "CIF", "bSortable": false },
                            { "sName": "NAME", "bSortable": false },
                            { "sName": "VPB INDUSTRY", "bSortable": false },
                            { "sName": "PAYMENTMETHOD", "bSortable": false },
                            { "sName": "INFO", "bSortable": false }];
                    totalLenCol = 9;
                    totalCifCol = 2;
                    break;
                case 2:
                    totalColumn= [
                            { "sName": "BRANCH", "bSortable": false },
                            { "sName": "DAO", "bSortable": false },
                        { "sName": "MSBO", "bSortable": false },
                            { "sName": "CIF", "bSortable": false },
                            { "sName": "NAME", "bSortable": false },
                            { "sName": "VPB INDUSTRY", "bSortable": false },
                            { "sName": "PAYMENTMETHOD", "bSortable": false },
                            { "sName": "STATUS", "bSortable": false },
                            { "sName": "INFO", "bSortable": false }];
                    totalLenCol = 8;
                    totalCifCol = 1;
                    break;
                case 3:
                    totalColumn= [
                            { "sName": "DAO", "bSortable": false },
                        { "sName": "MSBO", "bSortable": false },
                            { "sName": "CIF", "bSortable": false },
                            { "sName": "NAME", "bSortable": false },
                            { "sName": "VPB INDUSTRY", "bSortable": false },
                            { "sName": "PAYMENTMETHOD", "bSortable": false },
                            { "sName": "STATUS", "bSortable": false },
                            { "sName": "INFO", "bSortable": false }];
                    totalLenCol = 7;
                    totalCifCol = 0;
                    break;
                default:
                    break;
            }
            var table = $('#pm-account-planning').DataTable({
                "paging": true,
                //fixedHeader: true,
                "order": [[0, 'asc']],
                "bServerSide": true,
                "bProcessing": true,
                "responsive": true,
                "bAutoWidth": false,
                "aLengthMenu": [10, 30, 50, 100],
                "pageLength": 10,
                rowsGroup: [0, 1, 2,3],
                "sAjaxSource": '@Url.Action("AccountPlanningData", "PortfolioManagement")',
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "POST",
                        "url": sSource,
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'dataTables_wrapper'ip>>",
                "sPaginationType": "simple_numbers",//"full_numbers",
                "aoColumns":totalColumn,
                'fnCreatedRow': function (nRow, aData, iDataIndex) {
                    $(nRow).attr('id', 'my_account_planning' + iDataIndex); // or whatever you choose to set as the id
                    //$('td', nRow).eq(6).attr('id', 'td_' + iDataIndex + '_action');
                    //$('td', nRow).eq(6).attr('class', 'td_action');
                },
                "aoColumnDefs": [{
                    "width": "10%",
                    "aTargets": [totalLenCol],
                    "mRender": function (data, type, full) {
                        if ( '@Model.UserRecord.GroupIdentifier' == '4') {
                            return '<a class=\"btn btn-primary btn-xs\"  href=\"/PortfolioManagement/ViewDataAccountPlanning?cif=' + full[totalCifCol+2] + '\"><i class="fa fa-eye"></i></a><a class=\"btn btn-primary btn-xs\" href=\"/PortfolioManagement/EditAccountPlanning?cif=' + full[totalCifCol+2] + '\"><i class="fa fa-pencil"></i> </a><a class=\"btn btn-primary btn-xs\" href=\"/PortfolioManagement/HistoryEdit?cif=' + full[totalCifCol+2] + '\"><i class="fa fa-history"></i> </a>';
                        }else{
                            return '<a class=\"btn btn-primary btn-xs\"  href=\"/PortfolioManagement/ViewDataAccountPlanning?cif=' + full[totalCifCol+2] + '\"><i class="fa fa-eye"></i></a><a class=\"btn btn-primary btn-xs\" href=\"/PortfolioManagement/HistoryEdit?cif=' + full[totalCifCol+2] + '\"><i class="fa fa-history"></i> </a>';
                        }
                    }
                }
                    //, {
                    //    "width": "12%",
                    //    "aTargets": [totalCifCol],
                    //    "mRender": function (data, type, full) {
                    //        if (totalCifCol != -2) {
                    //            return '<a onclick=\"showDaoInfo(\'' + full[totalCifCol] + '\');\">' + full[totalCifCol] + '<i class="fa fa-info-circle"></i> </a>';
                    //        }
                    //    }
                    //}
                ],
                initComplete: function () {
                    this.api().columns().every(function () {
                        var column = this;
                        switch (column.context[0].aoHeader[0][column.index()].cell.innerText) {
                            case '@Html.Raw(SMECustomerWebsite.Core.Resources.Resource.Zone.ToUpper())':
                                createFilterRegion(column, '@Html.Raw(SMECustomerWebsite.Core.Resources.Resource.Zone)');
                                break;
                            case '@Html.Raw(SMECustomerWebsite.Core.Resources.Resource.DateOpenCifHeader)':
                                createFilterDate(column);
                                break;
                            case '@Html.Raw(@SMECustomerWebsite.Core.Resources.Resource.Branch.ToUpper())':
                                createFilterBranch(column);
                                break;
                            case '@Html.Raw(SMECustomerWebsite.Core.Resources.Resource.StatusHeader.ToUpper())':
                                var option = [{ id: '3', text: 'All' }, { id: '0', text: 'Not Yet' }, { id: '1', text: 'Inputed' }]
                                createFilterCustType(column,option);
                                break;
                            default:
                                if (column.index() < totalLenCol) {
                                    var select = $('<input type="text" class="filtet-table">')
                                                            .appendTo($(column.header()))
                                                            .on('keyup change', function () {
                                                                column.search(this.value).draw();
                                                            });
                                }
                                break;

                        }
                    });
                },
                "drawCallback": function (settings) {
                    $('table.custom_table th').removeClass().addClass('column-title');
                }
            });
            //table.buttons().container()
            //    .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );


        })
    </script>
    @if (true)
    {
        <script type="text/javascript">

            function startPageTourGuide() {
                var intro = introJs();
                var steps = [
                        {
                            element: '#pm-ap-tab',
                            intro: "@SMECustomerWebsite.Core.Resources.Resource.TourGuideAccountPlanningTab"
                        },
                        @*{
                            element: '#pm-pm-tab',
                            intro: "@SMECustomerWebsite.Core.Resources.Resource.TourGuidePortManTab",
                            position: 'right'
                        },*@
                        {
                            element: '#div-pm-account-planning',
                            intro: '@SMECustomerWebsite.Core.Resources.Resource.TourGuideAccGenTable',
                            position: 'bottom'
                        },
                        {
                            element: '#pm-account-planning_length',
                            intro: '@SMECustomerWebsite.Core.Resources.Resource.TourGuideAccGenTableLength',
                            position: 'right',
                        },
                        {
                            element: '#cm-search-box',
                            intro: "@SMECustomerWebsite.Core.Resources.Resource.TourGuideAccGenTableSearch",
                            position: 'bottom'
                        },
                        {
                            element: '#my_account_planning0',
                            intro: "@SMECustomerWebsite.Core.Resources.Resource.TourGuideAccGenTableRow",
                            position: 'bottom'
                        },
                        {
                            element: '#td_0_action',
                            intro: "@SMECustomerWebsite.Core.Resources.Resource.TourGuideAccGenTableRowAction",
                            position: 'left'
                        }
                ];
                intro.setOptions({
                    steps: steps,
                    showProgress: true,
                    scrollToElement: true,
                });
                intro.setOption('tooltipPosition', 'auto');
                intro.setOption('positionPrecedence', ['left', 'right', 'bottom', 'top'])
                intro.start();
            }
        </script>
    }
}